跳至主要内容

Typescript React_如何為組件傳入泛型

1. 使用泛型定義 interface​

首先，我們定義一個使用泛型 T 的 interface INavigationProps。

interface INavigationProps<T> {
  type: T;
  labelNames: T[];
  onClick: (type: T) => void;
}

這裡的 T 是一個 placeholder，它代表一個將在後面被具體指定的類型。在 INavigationProps 中，T 被用於 type 的類型，labelNames 的元素類型，以及 onClick 函數的參數類型。

2. 在組件中使用泛型​

接下來，我們在 Navigation 組件中使用泛型 T。

function Navigation<T extends string>(props: INavigationProps<T>) {
  const { onClick, labelNames, type } = props;
  // ...
}

在這裡，T 是一個被限制必須是 string 或其子類型的泛型。這樣就確保了傳入組件的 props 符合我們預期的類型。

3. 建立特定類型​

我們也可以定義特定的類型，例如 PlayType。

export type PlayType = "A GAME" | "B GAME";

在這裡，PlayType 是一種聯合類型，它只能是 "A GAME" 或 "B GAME" 兩者之一。

4. 使用泛型組件​

最後，我們可以使用我們剛剛定義的泛型組件，並在使用時指定泛型 T 的具體類型。

const labelNames: PlayType[] = ["A GAME", "B GAME"];

return (
<Navigation<PlayType>
    onClick={(type) => setPlayType(type)}
    type={playType}
    labelNames={["A GAME", "B GAME"]}
/>
)

在這裡，我們指定了 Navigation 組件的泛型 T 為 PlayType，這意味著 type、labelNames 的元素，以及 onClick 函數的參數都必須是 PlayType 類型。